<!-- 数据点击展示弹窗 -->
<template>
  <ve-modal :model-value="modelValue" @close="close" closable hideFooter>
    <view class="data-modal">
      <view class="data-modal-title">
        <view
          class="data-modal-title-text link-text item-center"
          :class="{ 'disabled-text': data.index <= 0 }"
          @click="handleClick('prev')"
        >
          <ve-icon name="arrow_left_1" size="26" />前一天
        </view>
        <view class="data-modal-title-text">{{ data.date }}</view>
        <view
          class="data-modal-title-text link-text item-center"
          :class="{ 'disabled-text': data.index >= data.maxLength }"
          @click="handleClick('next')"
        >
          后一天<ve-icon name="arrow_right_1" size="26" />
        </view>
      </view>

      <scroll-view scroll-y class="data-modal-content" @touchmove.stop :class="{ 'percentage-card': !landscape }">
        <template v-for="item in cellList" :key="item.id">
          <ve-cell-val :label="item.label" :unit="item.unit || '元'" priceAlign="right" :value="item.value" />
          <ve-line />
        </template>

        <ve-empty v-if="data.infoList.length == 0" />

        <view class="data-modal-content-card">
          <card :title="item.name || '-'" v-for="item in data.infoList" :key="item.id">
            <template v-if="type == revenue || store">
              <CardCell label="收入" :value="formatNumber(item.totalRevenueAmount)" />
              <CardCell label="支出" color="green" :value="formatNumber(item.totalExpenditureAmount)" />
              <CardCell label="收益" color="red" :value="formatNumber(item.totalProfitAmount)" />
            </template>
            <template v-else-if="type == 'order'">
              <CardCell v-if="type == 'order'" label="订单数" :value="item.count" unit="单" />
              <CardCell label="收入" :value="formatNumber(item.totalAmount)" />
            </template>
            <template v-else>
              <CardCell label="费用统计" :value="formatNumber(item.totalAmount)" />
            </template>
          </card>
        </view>
      </scroll-view>
    </view>
  </ve-modal>
</template>
<script setup>
  import card from './card/index.vue'
  import CardCell from './card/card-cell.vue'
  import { formatNumber } from '@/utils'
  const props = defineProps({
    modelValue: Boolean,
    data: Object,
    cellList: Array,
    type: String,
    landscape: Boolean,
  })
  const emit = defineEmits(['update:modelValue', 'changeDate'])
  const close = () => {
    emit('update:modelValue', false)
  }
  const handleClick = (type) => {
    emit('changeDate', type)
  }
</script>
<style lang="scss" scoped>
  .data-modal {
    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 32rpx;
      border-bottom: 1rpx solid #d8d8d8;
      &-text {
        font-size: 32rpx;
        font-weight: bold;
      }
    }
    &-content {
      overflow-y: auto;
      :deep(.ve-cell-title) {
        font-weight: 400;
        font-size: 30rpx;
        color: #191c27;
      }
      :deep(.result) {
        font-weight: 600;
        font-size: 30rpx;
        color: #1890ff;
      }
      &-card {
        padding: 24rpx 0;
        display: flex;
        flex-wrap: wrap;
        gap: 24rpx;
      }
    }
  }
  .link-text {
    color: #1890ff;
    font-weight: 400;
  }
  .disabled-text {
    filter: grayscale(100%);
    pointer-events: none;
    cursor: not-allowed;
  }
  .item-center {
    display: flex;
    align-items: center;
  }
  .percentage-card {
    max-height: 70vh;
    .summary-card {
      width: calc(50% - 12rpx);
      max-height: 70vh;
    }
  }

  :deep {
    .ve-modal {
      width: calc(100% - 40rpx);
    }
  }
</style>
